/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, BackTop, Typography, Table, Timeline, Icon, Drawer, Tooltip } from 'antd';
import {connect} from 'dva';
import request from '@/utils/request';
import ReactDataGrid from 'react-data-grid';
const { Text } = Typography;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      loading:false
    };
  }
  componentDidMount() {
    const that = this;
    that.setState({
      loading:true
    })
    request(`/accounts/${this.props.account_id}/billings`, {
      method: 'GET',
      params: {
        start_date:`${this.props.year}-01-01`,
        end_date:`${this.props.year}-12-31`,
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          data:response.data.data,
          loading:false
        })
      }


    });

  }
  render() {

    const columns = [
      {
        title: '扣费日期',
        dataIndex: 'date',
        width:120
      },
      {
        title: '所属阶梯',
        dataIndex: 'level',
        width:80,
        render:(value,row)=>{
          return `阶梯${value}`
        }
      },
      {
        title: <Tooltip title={`有'/'表示当前阶梯包含前一阶梯扣费水量`}><span>扣费水量 <Icon type="question-circle"/></span></Tooltip>,
        dataIndex: 'level_one_consumption',
        width:100,
        render: (value, row) => {
          if (row.level === 1) {
            return row.level_one_consumption;
          } else if (row.level === 2) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_consumption} / ${row.level_two_consumption}`;
            }
            return row.level_two_consumption;
          } else if (row.level === 3) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_consumption} / ${row.level_two_consumption} / ${row.level_three_consumption}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_consumption} / ${row.level_three_consumption}`;
            }
            return row.level_three_consumption;
          }else if (row.level === 4) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_consumption} / ${row.level_two_consumption} / ${row.level_three_consumption}  / ${row.level_four_consumption}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_consumption} / ${row.level_three_consumption} / ${row.level_four_consumption}`;
            }
            if (Number(row.level_three_consumption) !== 0) {
              return `${row.level_three_consumption} / ${row.level_four_consumption}`;
            }
            return row.level_four_consumption;
          }

        },
      },
      {
        title: <Tooltip title={`有'/'表示当前阶梯包含前一阶梯扣费水量`}><span>水费 <Icon type="question-circle"/></span></Tooltip>,
        dataIndex: 'level_three_fee',
        width:100,
        render: (value, row) => {
          if (row.level === 1) {
            return row.level_one_fee;
          } else if (row.level === 2) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_fee} / ${row.level_two_fee}`;
            }
            return row.level_two_fee;
          } else if (row.level === 3) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_fee} / ${row.level_two_fee} / ${row.level_three_fee}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_fee} / ${row.level_three_fee}`;
            }
            return row.level_three_fee;
          }else if (row.level === 4) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_fee} / ${row.level_two_fee} / ${row.level_three_fee} / ${row.level_four_fee}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_fee} / ${row.level_three_fee} / ${row.level_four_fee}`;
            }
            if (Number(row.level_three_consumption) !== 0) {
              return `${row.level_three_fee} / ${row.level_four_fee}`;
            }
            return row.level_four_fee;
          }
        },
      },
      {
        title: <Tooltip title={`有'/'表示当前阶梯包含前一阶梯扣费水量`}><span>污水处理费 <Icon type="question-circle"/></span></Tooltip>,
        dataIndex: 'level_one_sewage_fee',
        width:120,
        render: (value, row) => {
          if (row.level === 1) {
            return row.level_one_sewage_fee;
          } else if (row.level === 2) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_sewage_fee} / ${row.level_two_sewage_fee}`;
            }
            return row.level_two_sewage_fee;
          } else if (row.level === 3) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_sewage_fee} / ${row.level_two_sewage_fee} / ${row.level_three_sewage_fee}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_sewage_fee} / ${row.level_three_sewage_fee}`;
            }
            return row.level_three_sewage_fee;
          }else if (row.level === 4) {
            if (Number(row.level_one_consumption) !== 0) {
              return `${row.level_one_sewage_fee} / ${row.level_two_sewage_fee} / ${row.level_three_sewage_fee} / ${row.level_four_sewage_fee}`;
            }
            if (Number(row.level_two_consumption) !== 0) {
              return `${row.level_two_sewage_fee} / ${row.level_three_sewage_fee} / ${row.level_four_sewage_fee}`;
            }
            if (Number(row.level_three_consumption) !== 0) {
              return `${row.level_three_sewage_fee} / ${row.level_four_sewage_fee}`;
            }
            return row.level_four_sewage_fee;
          }

        },
      },
      {
        title: '总金额',
        dataIndex: 'amount',
      },
    ]
    let total=0;
    for (let i=0;i<this.state.data.length;i++){
      total+=Number(this.state.data[i].amount)
    }
    return (
      <div>
        <h2>当年扣费总金额 <span style={{color:'#f4a000'}}>{total.toFixed(2)}</span> 元 <Tooltip title={'该金额仅供参考，具体金额请看各阶具体扣费'}><Icon  type="question-circle"></Icon></Tooltip></h2>
        <Table
          style={{color: '#fff',maxWidth:this.state.maxWidth+'px',borderBottom:'1px solid #e8e8e8'}}
          className="custom-small-table meter-table vendor-meter"
          rowKey={'myId'}
          dataSource={this.state.data}
          loading={this.state.loading}
          columns={columns}
          pagination={false}
          scroll={{x: true, y: document.body.offsetHeight- 170}}
          size="small"
          rowClassName={(row, index)=>{
            return `level_${row.level}`
          }}
          bordered
        />
        <BackTop  target={()=>{return document.querySelector('.AnnualBillingsDetail .ant-table-body')}}/>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


